<template>
  <view class="history content-wrap">
    <u-navbar title="历史曲线" :title-bold="true" back-icon-color="#333" title-color="#000">
      <view slot="right" class="navbar-right">
        <image src="@/static/image/screen.svg" @click="clickBtn" class="navbar-right--icon" />
      </view>
    </u-navbar>
    <view class="search">
      <u-search
        placeholder="请输入传感器名称"
        v-model="searchData.cdLocation"
        shape="square"
        bg-color="#E5EAE8"
        height="80"
        :show-action="true"
        :input-style="{ marginLeft: '20rpx' }"
        :search-icon="searchSrc"
        placeholder-color="#999999"
        :disabled="true"
        :action-style="{
          color: '#369164',
          fontSize: '14px',
          fontWeight: '400'
        }"
        @click="openSensor"
        @custom="searchChart"
      ></u-search>
    </view>
    <view class="charts-box" v-if="!showechartEmpty">
      <qiun-data-charts
        type="line"
        :echartsH5="true"
        :echartsApp="true"
        :eopts="eopts"
        tooltipFormat="tooltipDemo1"
        :chartData="chartData"
      />
      <div v-if="!showTitle" class="chart-title">
        <div class="flex">
          <div class="flex">
            <div class="warn-box m-r-10"></div>
            <span class="f-14">报警</span>
          </div>
          <div class="flex m-l-10">
            <div class="calibration-box m-r-10"></div>
            <span class="f-14">标校</span>
          </div>
        </div>
      </div>
      <div v-if="!showTitle" class="f-14 chart-sub-title">监测值</div>
    </view>
    <view class="c-empty p-absolute-center" v-if="showechartEmpty">
      <u-empty text="暂无数据"></u-empty>
    </view>

    <u-popup mode="bottom" v-model="show">
      <view class="popup-content">
        <view class="u-flex u-row-between u-p-b-20">
          <u-button :hair-line="false" :custom-style="customStyle" throttle-time="500" @click="cancelSensor">取消</u-button>
          <u-button :hair-line="false" :custom-style="submitStyle" throttle-time="500" @click="clickSensor">确定</u-button>
        </view>
        <view class="u-p-b-20">
          <u-search
            placeholder="请输入传感器名称"
            v-model="filtersensorTypesVal"
            shape="square"
            bg-color="#E5EAE8"
            height="80"
            :show-action="true"
            :animation="true"
            :input-style="{ marginLeft: '20rpx' }"
            :search-icon="searchSrc"
            placeholder-color="#999999"
            :action-style="{
              color: '#369164',
              fontSize: '14px',
              fontWeight: '400'
            }"
          ></u-search>
        </view>
        <scroll-view scroll-y="true" style="height: 600rpx">
          <view class="w-100p checkbox">
            <u-checkbox-group active-color="#9AC8B1" width="100%" :wrap="true">
              <u-checkbox
                @change="checkboxsensorTypesChange"
                v-model="item.checked"
                class="checkbox-item"
                v-for="(item, index) in filtersensorTypesList"
                :key="index"
                :name="item.name"
                :disabled="item.disabled"
                >{{ item.name }}</u-checkbox
              >
            </u-checkbox-group>
            <template v-if="filtersensorTypesList && filtersensorTypesList.length === 0">
              <view class="c-empty p-absolute-center">
                <u-empty text="暂无数据"></u-empty>
              </view>
            </template>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      coalMineName: '',
      customerCode: '', //煤矿编码
      cdCodes: [], //测点编码
      opts: {},
      eopts: {},
      data: {},
      searchData: {
        cdLocation: '', // 测点安装位置
        cdCodes: [], //传感器类型编码列表
        customerNo: '', //煤矿编码
        startTime: '', //开始时间
        endTime: '', //结束时间
        enableAddPoint: false,
        sensorType: '', //传感器类型
        unitCode: '' //单位
      },
      type: '',
      arr: [],
      arrTwo: [],
      arrThree: [],
      cdLocation: '', // 传感器名称
      unitCode: '',
      sensorTypes: [], //获取传感器名称的搜索条件
      sensorTypesList: [],
      filtersensorTypesVal: '', //传感器名称搜索数据
      show: false,
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: '#333333',
        background: '#F1F5F3',
        borderRadius: '20rpx',
        width: '40%',
        border: 'none'
      },
      submitStyle: {
        color: '#333333',
        background: '#5BAC84',
        borderRadius: '20rpx',
        width: '40%',
        border: 'none'
      },
      checkList: [],
      searchSrc: require('@/static/image/search_icon.svg'),
      eChartDataCache: [],
      showechartEmpty: false,
      showTitle: true,
      chartData: {
        categories: [],
        series: []
      },
      isGetSensorList: true,
      isMore24Hour: false,
      parentStart: '', //初始开始时间，用于重置
      parentEnd: '' //初始值结束时间，用于重置
    }
  },
  async mounted() {
    await this.getData()
  },
  computed: {
    filtersensorTypesList() {
      return this.sensorTypesList?.filter(item => {
        return this.filtersensorTypesVal
          ? item.name?.indexOf(this.filtersensorTypesVal) >= 0 ||
              item.pinyin_code?.indexOf(this.filtersensorTypesVal.toUpperCase()) >= 0
          : true
      })
    }
  },
  methods: {
    /**
     * 初始化
     */
    init(data) {
      let { cdCode, cdLocation, areaLocation, customerCode, customerNo, beginDate, endDate, sensorType, unitCode } = data
      if (data) {
        this.searchData.cdCodes.push(cdCode)
        this.searchData.cdLocation = cdLocation ? cdLocation : areaLocation
        this.searchData.customerNo = customerCode
        this.searchData.customerNo = customerCode ? customerCode : customerNo
        if (beginDate) {
          // 获取 beginDate 的前 2 小时
          let startAndEndTime = this.$getStartAndEndTimeByEndTime(beginDate, '2')
          let startAndEndTime2 = ''
          if (endDate) {
            // 获取 endDate 的后 2 小时
            startAndEndTime2 = this.$getStartAndEndTimeByStartTime(endDate, '2')
          } else {
            // 获取 beginDate 的后 2 小时
            startAndEndTime2 = this.$getStartAndEndTimeByStartTime(beginDate, '2')
          }
          this.searchData.startTime = startAndEndTime.startTime
          this.searchData.endTime = startAndEndTime2.endTime
        } else {
          let beginDate = this.$date(Date.now())
          // 获取 beginDate 的前 2 小时
          let startAndEndTime = this.$getStartAndEndTimeByEndTime(beginDate, '2')
          // 获取 beginDate 的后 2 小时
          // let startAndEndTime2 = this.$getStartAndEndTimeByStartTime(
          //   beginDate,
          //   "2"
          // );
          this.searchData.startTime = startAndEndTime.startTime
          this.searchData.endTime = beginDate
        }
        this.parentStart = this.searchData.startTime
        this.parentEnd = this.searchData.endTime
        this.searchData.sensorType = sensorType
        this.searchData.unitCode = unitCode
      }
    },
    setOpts() {
      this.eopts = {
        title: {
          text: '',
          textAlign: 'center',
          top: '50%',
          right: '-5%',
          rotate: -90
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            yAxisIndex: [0],
            showDetail: false,
            start: 0,
            end: 10,
            top: '60',
            left: '5%'
          }
        ],
        legend: {
          rotation: -90,
          left: '16%',
          top: 'center',
          orient: 'vertical'
        },
        graphic: [],
        grid: {
          left: '35%',
          right: '70',
          top: '60'
        },
        color: [
          '#0EECF1',
          '#ffff00',
          '#ffa500',
          '#0000FF',
          '#C43CC4',
          '#9400d3',
          '#9f79ee',
          '#696969',
          '#ff00ff',
          '#bdb76b',
          '#006400',
          '#00bfff',
          '#66cd00',
          '#8b8989',
          '#ff1493'
        ],
        tooltip: {
          show: true,
          backgroundColor: '#ffffff',
          trigger: 'axis',
          triggerOn: 'mousemove',
          borderColor: '#369164',
          borderWidth: 1,
          padding: [5, 10],
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);Opacity: 1;z-index:999;transform: rotate(90deg);',
          textStyle: {
            color: '#666666'
          }
        },
        xAxis: {
          type: 'value', //数据
          position: 'top', //x 轴的位置【top bottom】
          nameRotate: -90, //坐标轴名字旋转，角度值。
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            rotate: 90 //刻度标签旋转的角度，
          }
          // scale: true, //是否是脱离 0 值比例
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#666666'
            }
          },
          type: 'category',
          inverse: 'true', //是否是反向坐标轴。
          axisLabel: { rotate: -90 }
        },
        visualMap: [],
        series: []
      }
      this.eopts.title.text = this.$isNull(this.data.customerShortName)
        ? this.coalMineName + this.searchData.startTime + '至' + this.searchData.endTime
        : this.data.customerShortName + this.searchData.startTime + '至' + this.searchData.endTime
    },
    openSensor() {
      this.show = true
      this.initSensor()
    },
    // 传感器类型数据初始化
    initSensor() {
      if (this.searchData.cdCodes !== []) {
        this.arr = []
        this.arrTwo = []
        this.arrThree = []
        for (let i = 0; i < this.sensorTypesList?.length; i++) {
          if (this.searchData.cdCodes.includes(`${this.sensorTypesList[i].cdCode}`)) {
            this.arr.push(this.sensorTypesList[i].cdLocation)
            this.arrTwo.push(this.sensorTypesList[i].cdCode)
            if (
              this.sensorTypesList[i].unitCode &&
              this.searchData.unitCode.indexOf(this.sensorTypesList[i].unitCode) === -1
            ) {
              this.arrThree.push(this.sensorTypesList[i].unitCode)
            }
            this.$set(this.sensorTypesList[i], 'checked', true)
          } else {
            this.$set(this.sensorTypesList[i], 'checked', false)
          }
        }
        this.$set(this, 'cdCodes', this.arrTwo)
        this.$set(this, 'unitCode', this.arrThree.toString())
        this.$set(this, 'cdLocation', this.arr.toString())
      } else {
        this.arr = []
        this.arrTwo = []
        this.arrThree = []
        for (let i = 0; i < this.sensorTypesList?.length; i++) {
          this.$set(this.sensorTypesList[i], 'disabled', false)
          this.$set(this.sensorTypesList[i], 'checked', false)
        }
        this.cdCodes = []
        this.cdLocation = ''
        this.unitCode = ''
      }
    },
    // 传感器类型数据取消
    cancelSensor() {
      this.initSensor()
      this.show = false
      this.filtersensorTypesVal = ''
    },
    // 传感器类型数据确认
    clickSensor() {
      this.searchData.cdCodes = this.cdCodes
      this.searchData.cdLocation = this.cdLocation
      this.searchData.unitCode = this.unitCode
      this.showechartEmpty = true
      this.eChartDataCache = []
      this.filtersensorTypesVal = ''
      this.show = false
      this.searchChart()
    },
    // 选中sensorType某个复选框时，由checkbox时触发
    checkboxsensorTypesChange(e) {
      if (e.value === true) {
        this.arr.push(e.name)
        for (let i = 0; i < this.sensorTypesList?.length; i++) {
          if (this.sensorTypesList[i].cdLocation === e.name) {
            this.arrTwo.push(this.sensorTypesList[i].cdCode)
            if (
              this.sensorTypesList[i].unitCode &&
              this.searchData?.unitCode.indexOf(this.sensorTypesList[i]?.unitCode) === -1
            ) {
              this.arrThree.push(this.sensorTypesList[i].unitCode)
            }
          }
        }
      } else {
        this.deleteOne(e.name, this.arr)
        for (let i = 0; i < this.sensorTypesList?.length; i++) {
          if (this.sensorTypesList[i].cdLocation === e.name) {
            this.deleteOne(this.sensorTypesList[i].cdCode, this.arrTwo)
            this.deleteOne(this.sensorTypesList[i].unitCode, this.arrThree)
          }
        }
      }
      let checked = []
      if (this.arrTwo.length === 4) {
        checked = this.arrTwo
        this.$refs.uToast.show({
          title: '传感器名称最多只能选择四个',
          type: 'warning'
        })
      }
      if (this.arrTwo.length >= 4) {
        for (let i = 0; i < this.sensorTypesList?.length; i++) {
          if (checked.includes(this.sensorTypesList[i].cdCode)) {
            this.$set(this.sensorTypesList[i], 'disabled', false)
          } else {
            this.$set(this.sensorTypesList[i], 'disabled', true)
          }
        }
      } else {
        for (let i = 0; i < this.sensorTypesList?.length; i++) {
          this.$set(this.sensorTypesList[i], 'disabled', false)
        }
      }
      this.cdCodes = this.arrTwo
      this.cdLocation = this.arr.toString()
      this.unitCode = this.arrThree.toString()
    },
    //删除数组元素
    deleteOne(str, arr) {
      let index = arr.indexOf(str)
      arr.splice(index, 1)
      return arr
    },
    //echarts图数据搜索
    searchChart() {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.getData()
      }, 300)
    },
    //清除echart数据
    clearECharts() {
      this.chartData.categories = []
      this.chartData.series = []
      this.eopts.graphic = []
      this.eopts.visualMap = []
    },
    //展现echart数据
    showEChartData() {
      this.clearECharts()
      // 生成报警或标校数据的函数
      let piecesFun = (pieces, data, color) => {
        data.forEach(item => {
          if (item.length === 1) {
            pieces.push({
              gte: item[0],
              lte: item[0],
              color: color
            })
          } else {
            pieces.push({
              gte: item[0],
              lte: item[1],
              color: color
            })
          }
        })
      }
      // 需要先 初始化 series legend 构建 X 轴
      let obj = [] // 用来去重的对象
      for (let i = 0; i < this.eChartDataCache?.length; i++) {
        const { data, sensorType, cdLocation } = this.eChartDataCache[i]
        // 开关的特殊处理
        let step = false
        if (sensorType && sensorType.substr(0, 1) !== '0') {
          step = 'start'
        }
        // 增加tag和初始化series
        this.chartData.series[i] = {
          name: cdLocation,
          data: [],
          unitCode: [],
          label: { show: false },
          smooth: true,
          step
        }
        // 构建 X 轴 合并去重所有传感器的时间
        for (let i2 = 0; i2 < data.length; i2++) {
          // 结构出传感器明细中的时间
          const { dateMinute } = data[i2]

          if (!obj[dateMinute]) {
            this.chartData.categories.push(dateMinute)
            obj[dateMinute] = 1
          }
        }
      }
      // 对X轴排序
      this.chartData.categories.sort((a, b) => {
        return new Date(a).getTime() - new Date(b).getTime()
      })

      if (!this.isMore24Hour) {
          //补点间隔 1分钟
          let interval = 60000;
          // 首尾与时间控件不匹配时添加首尾点为时间控件值
          let startTime = new Date(
              this.searchData.startTime
          ).getTime();
          let startXTime = new Date(this.chartData.categories[0]).getTime();
          if (startXTime - startTime > interval) {
              this.chartData.categories.unshift(
                  this.searchData.startTime
              );
          }

          let endTime = new Date(this.searchData.endTime).getTime();
          let endXTime = new Date(
              this.chartData.categories[this.chartData.categories.length - 1]
          ).getTime();
          if (endTime - endXTime > interval) {
              this.chartData.categories.push(this.searchData.endTime);
          }
          // 循环X轴镜像防止索引错位
          let oldXAxis = JSON.parse(JSON.stringify(this.chartData.categories))
          let j = 0
          for (let x = 0; x < oldXAxis.length; x++) {
            // 记录补点的个数
            const time = oldXAxis[x]
            const nextNinute = oldXAxis[x + 1]
            let startTime = new Date(time).getTime()
            let endTime = new Date(nextNinute).getTime()
            // 比较当前节点和下一个节点的时间间隔  间隔大于1分钟补一个时间
            if (nextNinute && endTime - startTime > 60000) {
              let len = Math.floor((endTime - startTime) / 60000)
              // 一共间隔了 len 分钟 向下取整
              for (let i = 0; i < len; i++) {
                let dot = this.$formatDate(startTime + 60000 * (i + 1), 'yyyy-MM-dd HH:mm:ss')
                // 在X轴中插入时间 应为 镜像的下标 + 1 + 之前补点的数量
                this.chartData.categories.splice(x + 1 + j, 0, dot)
                j++
              }
            }
          }
      }
      // 通过新的X轴补点 获取传感器在新X轴上的标校和报警索引
      for (let i = 0; i < this.eChartDataCache.length; i++) {
        // 获取需要的传感器参数
        const { data, bjIndexs, bxIndexs, cdLocation } = this.eChartDataCache[i]
        // 渲染报警和标校的颜色 源数据返回的是当前传感器索引 需要通过索引获取时间 再通过时间去在合并后的 x 轴获取到新的索引
        if ((bjIndexs && bjIndexs.length) || (bxIndexs && bxIndexs.length)) {
          let pieces = []

          if (bjIndexs && bjIndexs.length) {
            const bjValues = bjIndexs.map(scope => {
              let arr = [data[scope[0]].dateMinute]
              if (scope[1]) {
                arr.push(data[scope[1]].dateMinute)
              }
              return arr
            })
            const newbjIndexs = bjValues.map(scope => {
              return [
                this.chartData.categories.findIndex(time => time === scope[0]),
                this.chartData.categories.findIndex(time => time === scope[1])
              ]
            })
            piecesFun(pieces, newbjIndexs, '#EF585C')
          }

          if (bxIndexs && bxIndexs.length) {
            const bxValues = bxIndexs.map(scope => {
              let arr = [data[scope[0]].dateMinute]
              if (scope[1]) {
                arr.push(data[scope[1]].dateMinute)
              }
              return arr
            })
            const newbxIndexs = bxValues.map(scope => {
              return [
                this.chartData.categories.findIndex(time => time === scope[0]),
                this.chartData.categories.findIndex(time => time === scope[1])
              ]
            })
            piecesFun(pieces, newbxIndexs, '#73EA5E')
          }
          this.eopts.visualMap.push({
            show: false,
            dimension: 0,
            seriesIndex: i,
            pieces: pieces,
            outOfRange: {
              color: this.eopts.color[i % 8],
              symbolSize: [0]
            }
          })
        }

        // 通过合并后的时间轴生成数据
        for (let x = 0; x < this.chartData.categories.length; x++) {
          const time = this.chartData.categories[x]
          // 按照x轴顺序找到源数据中当前时间的点位
          const currentDot = data.find(item => item.dateMinute === time)
          // 如果存在就加入series
          if (currentDot) {
            this.chartData.series[i].data.push({
              value: currentDot.cdValue,
              dateMinute: time,
              unitCode: currentDot.unitCode
            })
          } else {
            this.chartData.series[i].data.push({
              value: '',
              dateMinute: time,
              unitCode: ''
            })
          }
        }
      }
      // 增加dataZoom刻度
      const start = new Date(this.chartData.categories[0]).getTime()
      const end = new Date(this.chartData.categories[this.chartData.categories.length - 1]).getTime()
      const step = (end - start) / 3
      for (let i = 0; i <= 3; i++) {
        let rule = this.$formatDate(start + step * i, 'yyyy-MM-dd HH:mm:ss')
        if (i === 3) {
          rule = this.chartData.categories[this.chartData.categories.length - 1]
        }
        this.eopts.graphic.push({
          type: 'text',
          id: i,
          style: {
            fill: '#333',
            textAlign: 'center',
            overflow: 'break',
            text: rule
          },
          originY: 0,
          originX: 0,
          rotation: 11,
          left: 0,
          top: `${i * 25}%`
        })
      }
      this.eopts.title.text = this.$isNull(this.data.customerShortName)
        ? this.coalMineName + this.searchData.startTime + '至' + this.searchData.endTime
        : this.data.customerShortName + this.searchData.startTime + '至' + this.searchData.endTime

    },
    // 获取传感器列表
    async getName() {
      let params = {
        customerNo: this.customerCode, //煤矿编码
        cdCode: this.cdCodes.toString(), //测点编码
        sensorTypes: this.sensorTypes ? this.sensorTypes : [] //传感器类型列表
      }
      const res = await this.$form('/alarm/fusionAnalysis/getHisGraphSensorList', params)
      if (res) {
        this.sensorTypesList = res.body
        for (let i = 0; i < this.sensorTypesList?.length; i++) {
          this.$set(this.sensorTypesList[i], 'disabled', false)
          this.$set(this.sensorTypesList[i], 'checked', false)
          this.$set(this.sensorTypesList[i], 'name', this.sensorTypesList[i].cdLocation)
        }
      }
    },
    /**
     * 请求数据
     */
    getData() {
      if (!this.searchData.cdCodes.length) {
        this.showTitle = true
        this.showechartEmpty = true
        this.$refs.uToast.show({
          title: '请选择传感器',
          type: 'warning'
        })
        return
      }
      this.isMore24Hour = false
      this.$form('/alarm/fusionAnalysis/getHisGraph', this.searchData)
        .then(res => {
          if (res && res.body?.data) {
            // 是否24小时
            this.isMore24Hour = res.body.isMore24Hour

            this.eChartDataCache = res.body.data
            if (res.body?.data && res.body?.data.length !== 0) {
              this.showEChartData()
              this.showechartEmpty = false
              this.showTitle = false
            } else {
              this.showechartEmpty = true
              this.showTitle = true
            }
          }
        })
        .catch(e => {
          this.showechartEmpty = true
          this.showTitle = true
        })
    },
    //点击搜索后重置搜索条件
    initSearchData(res) {
      this.$set(this, 'sensorTypes', res.sensorType)
      this.$set(this.searchData, 'cdLocation', '')
      this.$set(this.searchData, 'unitCode', '')
      this.$set(this.searchData, 'cdCodes', [])
      this.$set(this.searchData, 'sensorType', res.sensorType.toString())
      this.cdLocation = ''
      this.unitCode = ''
      this.cdCodes = []
      this.arr = []
      this.arrTwo = []
    },
    clickBtn() {
      uni.navigateTo({
        url: `./screen?customerCode=${this.customerCode}&cdCode=${this.cdCodes.toString()}&sensorType=${
          this.data.sensorType
        }&begin=${this.parentStart}
         &end=${this.parentEnd}&data=${JSON.stringify(this.searchData)}`
      })
    }
  },
  onShow() {
    uni.$on('handClickCurveScreen', res => {
      if (res.sensorType.length !== 0 || res.sensorType !== '') {
        this.$set(this.searchData, 'startTime', res.beginDate)
        this.$set(this.searchData, 'endTime', res.endDate)
        if (this.searchData.sensorType == res.sensorType.toString()) {
          this.isGetSensorList = false
        } else {
          this.isGetSensorList = true
          this.initSearchData(res)
        }
      } else {
        this.isGetSensorList = true
        this.initSearchData(res)
      }
      // 清除监听keyword
      uni.$off('handClickCurveScreen')
    })
    this.$nextTick(() => {
      if (this.isGetSensorList) {
        this.getName()
      }
      if (this.searchData.cdCodes.length == '0') {
        this.showTitle = true
        this.showechartEmpty = true
        this.$refs.uToast.show({
          title: '请选择传感器',
          type: 'warning'
        })
        return
      }
      this.searchChart()
    })
  },
  onLoad(options) {
    const { data, type, coalMineName } = options
    this.type = type
    this.coalMineName = coalMineName
    this.data = JSON.parse(data)
    this.sensorTypes.push(this.data.sensorType)
    this.customerCode = this.data.customerCode ? this.data.customerCode : this.data.customerNo
    this.cdCodes.push(this.data.cdCode)
    this.unitCode = this.data.unitCode
    this.init(this.data)
    this.setOpts()
  }
}
</script>

<style lang="scss">
.history {
  padding: $uni-page-padding;
  &-search {
    flex: none;
  }
  .navbar-right {
    margin-right: 40rpx;
    &--icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
/* 搜索框 */
.search {
  padding: 20rpx 28rpx;
}
.charts-box {
  display: flex;
  position: relative;
  align-items: center;
  /* transform: rotate(90deg); */
  width: 100%;
  height: 100%;
}
.popup-content {
  padding: 24rpx;
  text-align: center;
  .checkbox {
    &-item {
      height: 100rpx;
    }
    /deep/.u-checkbox-group {
      display: inline;
      .u-checkbox {
        border-bottom: 1px solid #dddddd;
        justify-content: space-between;
        flex-flow: row-reverse;
        .u-checkbox__icon-wrap {
          background: rgba(1, 72, 51, 0.2);
          border: none;
        }
        .u-checkbox__icon-wrap--disabled {
          background: #ebedf0 !important;
          border: none;
        }
      }
    }
  }
}
.chart-title {
  position: absolute;
  right: -310rpx;
  width: 770rpx;
  text-align: center;
  transform: rotate(90deg);
  display: flex;
  justify-content: center;
  .warn-box {
    height: 20rpx;
    width: 40rpx;
    background: #ef585c;
  }
  .calibration-box {
    height: 20rpx;
    width: 40rpx;
    background: #73ea5e;
  }
}
.chart-sub-title {
  position: absolute;
  right: -310rpx;
  top: 80rpx;
  width: 770rpx;
  text-align: center;
  transform: rotate(90deg);
  display: flex;
  justify-content: center;
}
</style>
